<template>
	<view class="container">
		<view class="login-icon"><image src="../../static/img/log.png" mode="aspectFit"></image></view>
		<view class="login-content">
			<view class="loign-input">
				<view class="login-input-i">
					<input id="account" type="number"  v-model="register.phone" placeholder="请输入手机号" placeholder-class="input-placeholder" />
					<view class="login-input-c">
					</view>
				</view>
				<view class="login-input-item"><input id="psw" type="text"  v-model="register.password" value="" placeholder="请输入密码" placeholder-class="input-placeholder" /></view>
			</view>
			<view class="login-certain"><view @tap="registEvent('register')">立即注册</view></view>
			<view class="login-jump">
				<view class="login" @tap="backEvent">已有账号立即登陆</view>
			</view>
		</view>
	</view>
</template>

<script>
	error:'0'
export default {
	data() {
		return {
			// error:'',
			register:{
								phone:'',
								password:''
							},
		};
	},
	methods:{
		async registEvent(){
			const res = await this.$myRequest({
						url: '/user/register?phone='+this.register.phone+'&password='+this.register.password
						})
						console.log(res.data)
						this.error=res.data
						console.log(this.error)
						
			uni.hideKeyboard()
			//模板示例部分验证规则
			if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.register.phone))){ 
				uni.showToast({title: '请填写正确手机号码',icon:"none"});
				return false; 
			} 
			if(/^1$/.test(this.error)){
				uni.showToast({
					title:"注册成功",
				})
				this.register.phone = ''
				this.register.password = ''
			}else{
				uni.showToast({
					title:'手机号码已存在'
				})
			}
				
		},
		
		backEvent(){
			wx.navigateBack();
		}
		
	}
};
</script>

<style lang="scss">
page {
	background-color: #f06c7a;
}

.container {
	background-color: #f06c7a;
	display: flex;
	flex-direction: column;
	align-items: center;

	.login-icon {
		margin-top: 70upx;
		image {
			border-radius: 75upx;
			width: 150upx;
			height: 150upx;
		}
	}

	.login-content {
		margin-top: 70upx;
		width: 88%;

		.loign-input {
		}
		.login-input-i {
			display: flex;
			flex-direction: row;
			line-height: 90upx;
			height: 90upx;
			background-color: rgba($color: #f06c7a, $alpha: 0.3);
			margin-bottom: 20upx;
			justify-content: space-between;
			
			input {
				color: #ffffff;
				padding-left: 20upx;
				height: 100%;
			}
			.input-placeholder {
				color: #fff;
			}
			
			.login-input-c {
				display: flex;
				flex-direction: row;
				
				.get-code {
					margin-left: 20upx;
					// color: #FFFFFF;
				}
			}
			
		}
		.login-input-item {
			
			line-height: 90upx;
			height: 90upx;
			background-color: rgba($color: #f06c7a, $alpha: 0.3);
			margin-bottom: 20upx;

			input {
				color: #ffffff;
				padding-left: 20upx;
				height: 100%;
			}
			.input-placeholder {
				color: #fff;
			}
		}

		.login-certain {
			line-height: 90upx;
			height: 90upx;
			background-color: #fff;
			color: #f06c7a;
			text-align: center;
			border-radius: 45upx;
			margin-bottom: 20upx;
		}

		.login-jump {

			.login {
				color: #ffffff;
				font-size: 32upx;
				text-align: center;
			}
			
		}
	}
}
</style>
